<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运单审核</title>
    <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="../../static/kj/vue.min.js"></script>
    <script src="../../static/kj/element-ui/index.js"></script>
    <script src="../../static/sa.js"></script>
</head>
<body>
    <div id="app">
        <div class="c-panel f-main">
            <div class="c-title">运单审核</div>
            
            <!-- 审核统计概览 -->
            <div class="audit-overview">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card class="overview-card pending">
                            <div class="overview-item">
                                <div class="overview-number">{{ auditStats.pending }}</div>
                                <div class="overview-label">待审核</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card approved">
                            <div class="overview-item">
                                <div class="overview-number">{{ auditStats.approved }}</div>
                                <div class="overview-label">已通过</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card rejected">
                            <div class="overview-item">
                                <div class="overview-number">{{ auditStats.rejected }}</div>
                                <div class="overview-label">已拒绝</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card today">
                            <div class="overview-item">
                                <div class="overview-number">{{ auditStats.today }}</div>
                                <div class="overview-label">今日处理</div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!-- 筛选条件 -->
            <div class="filter-section">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-select v-model="filterForm.status" placeholder="审核状态" clearable>
                            <el-option label="待审核" value="pending"></el-option>
                            <el-option label="已通过" value="approved"></el-option>
                            <el-option label="已拒绝" value="rejected"></el-option>
                            <el-option label="需补充" value="supplement"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-select v-model="filterForm.priority" placeholder="优先级" clearable>
                            <el-option label="紧急" value="urgent"></el-option>
                            <el-option label="高" value="high"></el-option>
                            <el-option label="普通" value="normal"></el-option>
                            <el-option label="低" value="low"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-input v-model="filterForm.keyword" placeholder="运单号/客户名称" clearable></el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" @click="searchWaybills">查询</el-button>
                        <el-button @click="resetFilter">重置</el-button>
                    </el-col>
                </el-row>
            </div>

            <!-- 运单审核列表 -->
            <div class="waybill-audit-list">
                <el-table :data="waybillData" border style="width: 100%">
                    <el-table-column prop="waybillNo" label="运单号" width="140"></el-table-column>
                    <el-table-column prop="customerName" label="客户名称" width="150"></el-table-column>
                    <el-table-column prop="route" label="运输路线" width="200"></el-table-column>
                    <el-table-column prop="cargoInfo" label="货物信息" width="180"></el-table-column>
                    <el-table-column prop="submitTime" label="提交时间" width="160"></el-table-column>
                    <el-table-column prop="status" label="审核状态" width="100">
                        <template slot-scope="scope">
                            <el-tag :type="getStatusType(scope.row.status)">
                                {{ getStatusText(scope.row.status) }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="complianceScore" label="合规评分" width="120">
                        <template slot-scope="scope">
                            <el-progress 
                                :percentage="scope.row.complianceScore" 
                                :show-text="true"
                                :stroke-width="8">
                            </el-progress>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="viewDetails(scope.row)">详情</el-button>
                            <el-button size="mini" type="primary" v-if="scope.row.status === 'pending'" @click="auditWaybill(scope.row)">审核</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 分页 -->
            <div class="pagination-wrapper">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- 审核操作对话框 -->
        <el-dialog title="运单审核" :visible.sync="auditDialogVisible" width="50%">
            <el-form :model="auditForm" label-width="100px">
                <el-form-item label="审核结果">
                    <el-radio-group v-model="auditForm.result">
                        <el-radio label="approved">通过</el-radio>
                        <el-radio label="rejected">拒绝</el-radio>
                        <el-radio label="supplement">要求补充</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="审核意见">
                    <el-input type="textarea" v-model="auditForm.comment" :rows="3" placeholder="请输入审核意见"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="auditDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitAudit">确认审核</el-button>
            </span>
        </el-dialog>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    auditStats: {
                        pending: 23,
                        approved: 156,
                        rejected: 12,
                        today: 45
                    },
                    filterForm: {
                        status: '',
                        priority: '',
                        keyword: ''
                    },
                    waybillData: [
                        {
                            waybillNo: 'HY202401001',
                            customerName: '衡阳湘莲农业合作社',
                            route: '衡阳→长沙',
                            cargoInfo: '衡阳湘莲 5吨',
                            submitTime: '2024-01-15 09:30',
                            status: 'pending',
                            complianceScore: 92
                        },
                        {
                            waybillNo: 'HY202401002',
                            customerName: '衡阳祁东黄花菜合作社',
                            route: '衡阳祁东→广州',
                            cargoInfo: '衡阳黄花菜 3吨',
                            submitTime: '2024-01-15 10:15',
                            status: 'supplement',
                            complianceScore: 78
                        },
                        {
                            waybillNo: 'HY202401003',
                            customerName: '衡阳南岳茶油公司',
                            route: '衡阳南岳→深圳',
                            cargoInfo: '衡阳茶油 2吨',
                            submitTime: '2024-01-15 11:30',
                            status: 'approved',
                            complianceScore: 95
                        },
                        {
                            waybillNo: 'HY202401004',
                            customerName: '衡阳蒸湘生鲜市场',
                            route: '衡阳蒸湘→武汉',
                            cargoInfo: '衡阳土鸡蛋 1.5吨',
                            submitTime: '2024-01-15 14:20',
                            status: 'pending',
                            complianceScore: 88
                        },
                        {
                            waybillNo: 'HY202401005',
                            customerName: '衡阳珠晖农产品公司',
                            route: '衡阳珠晖→郵阳',
                            cargoInfo: '衡阳大白菜 4吨',
                            submitTime: '2024-01-15 16:45',
                            status: 'rejected',
                            complianceScore: 45
                        },
                        {
                            waybillNo: 'HY202401006',
                            customerName: '衡阳雁峰冷链物流',
                            route: '衡阳雁峰→三亚',
                            cargoInfo: '衡阳白萄萄 2.8吨',
                            submitTime: '2024-01-16 08:15',
                            status: 'pending',
                            complianceScore: 82
                        }
                    ],
                    currentPage: 1,
                    pageSize: 10,
                    total: 6,
                    auditDialogVisible: false,
                    selectedWaybill: null,
                    auditForm: {
                        result: '',
                        comment: ''
                    }
                }
            },
            methods: {
                getStatusType(status) {
                    const typeMap = {
                        'pending': 'warning',
                        'approved': 'success',
                        'rejected': 'danger',
                        'supplement': 'info'
                    };
                    return typeMap[status] || 'info';
                },
                getStatusText(status) {
                    const textMap = {
                        'pending': '待审核',
                        'approved': '已通过',
                        'rejected': '已拒绝',
                        'supplement': '需补充'
                    };
                    return textMap[status] || '未知';
                },
                searchWaybills() {
                    this.$message.success('查询完成');
                },
                resetFilter() {
                    this.filterForm = {
                        status: '',
                        priority: '',
                        keyword: ''
                    };
                },
                viewDetails(row) {
                    this.$message.info('查看运单详情：' + row.waybillNo);
                },
                auditWaybill(row) {
                    this.selectedWaybill = row;
                    this.auditDialogVisible = true;
                },
                submitAudit() {
                    if (!this.auditForm.result) {
                        this.$message.error('请选择审核结果');
                        return;
                    }
                    this.selectedWaybill.status = this.auditForm.result;
                    this.$message.success('审核完成');
                    this.auditDialogVisible = false;
                },
                handleCurrentChange(val) {
                    this.currentPage = val;
                }
            }
        });
    </script>

    <style scoped>
        .audit-overview {
            margin-bottom: 30px;
        }
        
        .overview-card {
            text-align: center;
            cursor: pointer;
        }
        
        .overview-card.pending {
            border-left: 4px solid #E6A23C;
        }
        
        .overview-card.approved {
            border-left: 4px solid #67C23A;
        }
        
        .overview-card.rejected {
            border-left: 4px solid #F56C6C;
        }
        
        .overview-card.today {
            border-left: 4px solid #409EFF;
        }
        
        .overview-number {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
        }
        
        .overview-label {
            color: #606266;
            margin-top: 5px;
        }
        
        .filter-section {
            background: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        
        .pagination-wrapper {
            text-align: center;
            padding: 20px 0;
        }
    </style>
</body>
</html>